import { } from "react";
import { Button } from "antd-mobile";
import { useDispatch } from "react-redux";
import { editDate } from "../../store/CitySlice";
import dayjs from "dayjs";
import styles from "./index.module.css";

const Index = (props) => {
    const dispatch = useDispatch();
    // 接收父组件传递的参数
    const { date } = props;
    //计算时间差的状态
    const timeDiff = dayjs(date).diff(dayjs(), "day", true);

    // 修改日期的函数
    const handelChangeDate = (num) => {
        const newDate = dayjs(date).add(num, "day").format("YYYY-MM-DD");
        // 调用dispatch修改日期
        dispatch(editDate({ date: newDate }));
    };
    return (
        <div className={styles.nav_box}>
            <Button
                size="mini"
                shape="rounded"
                disabled={timeDiff <= 0}
                onClick={() => handelChangeDate(-1)}
            >
                前一天
            </Button>
            <h3>{date}</h3>
            <Button
                size="mini"
                shape="rounded"
                disabled={timeDiff >= 3}
                onClick={() => handelChangeDate(1)}
            >
                后一天
            </Button>
        </div>
    );
};

export default Index;
